<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>
    <!---引入react核心库-->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!--引入react-dom用于支持react操作dom-->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!--引入babel用于将jsx转为js-->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel"> //此处一定要写

   
    /*
        标签混入js表达式时要用{}
        一定注意区分：【js语句（代码）】与【js表达式】
            1.表达式：一个表达式会产生一个只，可以放在任何一个需要值的地方
                下面这些都是表达式
                (1). a
                (2). a+b
                (3). demo(1)
                (4).arr.map()
                (5). function test(){}
            2.语句（代码）：
                下面这些都是语句(代码)：
                (1).if(){}
                (2).for(){}
                (3).switch(){case:xxxx}

    */
    //模拟一些数据
    const data = ['Angular','React','Vue']

    const VDOM =(
        <div>
           <h1>前端js框架列表</h1> 
            <ul>
                {
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>

    )
    
    ReactDOM.render(VDOM,document.getElementById('test'))

    </script>
</body>
</html>